<!--
- Author:   .
- Date:    2018/1/19 0019.
- File:    withdrawHistory.
-->
<template>
  <div class="Web_Box pt55">
    <div class="account_tab guding">
      <ul class="f-cb">
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.waiting}" @click="switchDrawStatus($dictionary.withdrawStatus.waiting)">转出中</li>-->
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.resolve}" @click="switchDrawStatus($dictionary.withdrawStatus.resolve)">已转出</li>-->
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.reject}" @click="switchDrawStatus($dictionary.withdrawStatus.reject)">其他</li>-->
        <li style="width: 100%" :class="{'on': status == 3}" @click="switchDrawStatus(3)">云宝转出</li>
      </ul>
    </div>
    <div class="DistributionOrder">
      <div class="present"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <!--<div class="suborbox f-cb">-->
          <!--<div class="subornat"><i class="iconfont icon-downdot"></i>-->
            <!--<select v-model="direct">-->
              <!--<option value="1">转到银行卡</option>-->
              <!--<option value="2">转到经验值</option>-->
            <!--</select>-->
          <!--</div>-->
        <!--</div>-->
        <div v-for="history in historyList.data">
          <div class="Presentrecord" v-if="status != 3">
            <div class="presen f-cb">
              <span>{{history.account_name}}</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.waiting">{{history.state | withdrawStatusTxt}}</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.resolve">已打款</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.reject">{{history.state | withdrawStatusTxt}}</span>
            </div>
            <div class="precord">
              <p>转出金额：<span class="">{{history.withdrawals_amount}}元</span></p>
              <p v-show="direct == '1'">银行手续费：<span class="">-{{(history.handing_fee) | toFixed(2)}}元</span></p>
              <p v-show="direct == '1'">实际到账金额：<span class="cr_f97e4e">{{history.amount}}元</span></p>
              <p v-show="direct == '1'">银行卡号：{{history.member_bank_num}}</p>
              <p>申请时间：{{history.add_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}</p>
              <p v-show="history.optime">审核时间：{{history.optime | timestampToDate('yyyy-MM-dd hh:mm:ss')}}</p>
              <p>预计到账时间：{{history.pre_arrive_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}&nbsp; <span v-show="direct == '1'">前</span></p>
              <p v-show="history.arrive_time">到账时间：{{history.arrive_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}</p>
              <div class="withdraw" v-show="status == $dictionary.withdrawStatus.waiting && history.state == $dictionary.withdrawStatus.waiting" @click="cancleApply(history.w_id)">撤销申请</div>
            </div>
          </div>
          <div class="Presentrecord" v-if="status == 3">
            <div class="presen f-cb">
              <span>{{history.account_name}}</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.waiting">{{history.state | withdrawStatusTxt}}</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.resolve">已打款</span>
              <span class="Amount" v-show="status == $dictionary.withdrawStatus.reject">{{history.state | withdrawStatusTxt}}</span>
            </div>
            <div class="precord">
              <p v-show="history.style != 16 && history.pname !=null">收款人：{{history.pname}}</p>
              <p>转出金额：<span class="">{{history.fb_value}}</span></p>
              <p>转出时间：{{history.addtime | timestampToDate('yyyy-MM-dd hh:mm:ss')}}</p>
              <p>备注：{{history.remark}}</p>
              <!--<div class="withdraw" v-show="status == $dictionary.withdrawStatus.waiting && history.state == $dictionary.withdrawStatus.waiting" @click="cancleApply(history.w_id)">撤销申请</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="historyList.allLoaded" :show="historyList.data.length > 0"></loading-more>
    <empty-data :show="historyList.allLoaded && historyList.data.length <= 0"></empty-data>
    <back-nav></back-nav>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        integralType: this.$route.query.type || '2',
        status: 3 || this.$dictionary.withdrawStatus.waiting,
        direct: this.$route.query.derect || '1', // 1 银行 2经验值
        historyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.initBalanceHistory()
    },
    watch: {
      $route () {
        this.status = this.$route.query.status || this.$dictionary.withdrawStatus.waiting
        this.direct = this.$route.query.derect || '1' // 1 银行 2经验值
        this.initBalanceHistory(this.historyList.page, this.historyList.pageSize)
      },
      direct: function (value, newValue) {
        this.initBalanceHistory()
      }
    },
    methods: {
      cancleApply(applyId) {
        this.$messageBox.confirm(`你确定要撤销申请吗?`).then(action => {
          this.$request.cancelIntegralOut(applyId).then(data => {
            this.$toast('撤销成功')
            this.initBalanceHistory()
          }).catch(e => {
            this.$toast('撤销失败:', e.msg)
            console.error('撤销积分转出失败', e)
          })
        }).catch(() => {
        })
      },
      switchDrawStatus(value) {
        this.$router.replace({name: 'integral-history', query: {status: value}})
      },
      initBalanceHistory() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getIntegralOutList(this.historyList.page, this.historyList.pageSize)
      },
      getIntegralOutList(page, pageSize) {
        this.historyList.loading = true
        let params = {is_remittance: this.status, style: this.direct, page: page, pageSize: pageSize, type: this.status}

        this.$request.getIntegralOutList(params).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      },
      loadMore() {
        if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralOutList(++this.historyList.page, this.historyList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>
